<ul class="nav nav-pills nav-stacked" id="widget_column">

    <li class="active">
        <a href="#">
            <span class="badge pull-right" id="widget_total"><?php echo $this->widgets->count() ?></span>
            <span class="glyphicon glyphicon-th-list"></span> &nbsp;&nbsp;Widget
        </a>
    </li>

    <li style="height: 10px"></li>

    <div class="progress progress-striped user_profile_progress">
        <div id="profile_progress" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            <span class="sr-only"></span>
        </div>
    </div>
    <div id="widget_sortable">
    <?php foreach ($this->widgets as $widget) : ?>
        <div id="widget_id_<?php echo $widget->id ?>" class="user_widget_space">
            <li class="panel panel-default user_widget_area" num="<?php echo $widget->id ?>"
                ng-model="widget_item_<?php echo $widget->id ?>" data-drag="true"
                data-jqyoui-options="{revert: 'invalid'}" jqyoui-draggable="{animate:true}"
                ng-hide="!widget_item_<?php echo $widget->id ?>.title">
                <div class="panel-body user_widget_item">
                    <span class="glyphicon user_widget_icon"><img alt=""
                                                                  src="img/app/profile/icon/<?php echo strtolower($widget->name) ?>.png"/></span>
                    <span class="user_wiget_item_name"><?php echo $widget->name ?></span>
                </div>
            </li>
        </div>
    <?php endforeach ?>
    </div>
</ul>